import { useState, useEffect } from "react";
// 页面css
import '../assets/css/detail.css'
// 接口
import { getGoodsInfo, addCart } from '../request/app'
// link跳转传参'
import { useNavigate } from 'react-router-dom'
// 接参
import { useParams } from 'react-router-dom'
// 核心
import React from 'react'
// 框架
import { NoticeBar } from 'antd-mobile'
import Header from '../common/header'
function Detail() {
    let [nav, setnav] = useState([
        {
            id: 1,
            con: '商品'
        },
        {
            id: 2,
            con: '评价'
        },
        {
            id: 3,
            con: '详情'
        },
        {
            id: 4,
            con: '推荐'
        }
    ])

    let [imgs, setimgs] = useState([
        {
            id: 1,
            img: require('../assets/img/detail/dianpu.png')
        },
        {
            id: 3,
            img: require('../assets/img/detail/gowuche.png')
        }, {
            id: 2,
            img: require('../assets/img/detail/kefu.png')
        }
    ])
    let [shop, setshop] = useState(
        [
            {
                id: 1,
                imgs: require('../assets/img/detail/imgs2.png')
            }
        ]
    )

    let [Getgoodlist, setGetgoodlist] = useState(
        []
    )
    // 参数
    const params = useParams()
    let Navigate = useNavigate()
    // 接口

    useEffect(() => {

        getGoodsInfo({ id: params.id }).then(res => {
            if (res.code == 200) {
                setGetgoodlist(res.list[0])
            }
        })
    }, [])
    // 添加购物车
    function Cartadd(e) {
        if (!JSON.parse(sessionStorage.getItem('userInfo'))) {
            alert('去登录')
            Navigate('/login')
            return
        } else {
            addCart({
                uid: JSON.parse(sessionStorage.getItem('userInfo')).uid,
                type: 1,
                goodsid: e,
                num: 1
            }).then(res => {
                if (res.code == 200) {
                    console.log('成功');
                    Navigate('/index/cart')
                }
            })
        }
    }
    return (
        <div className="De_box">
            {/* 头部 */}
            <Header title={'详情页'}></Header>
            {/* 身体 */}
            <div className="De_body">
                {/* 身体 （上部分）*/}
                <div className="D_D_top">
                    {
                        nav.map(item => {
                            return (
                                <span key={item.id}> {item.con}</span>
                            )
                        })}
                </div>
                {/* 身体 （中部分）*/}
                <div className="D_D_center">
                    {/* 身体 （中部分《《《《上》》》》 ）*/}
                    <div className="D_D_C_top">
                        <img src={Getgoodlist.img} alt="" />
                        <img src={shop[0].imgs} alt="" />
                        <span>8/8</span>

                    </div>
                    {/* 身体 （中部分《《《《中》》》》 ）*/}
                    <div className="D_D_C_center">
                        <img src={require('../assets/img/detail/detail_2.png')} alt="" className="imgs1" />
                        <div className="big_box">
                            <div className="small fl clearfix">
                                <span className="S_s fl clearfix">限时</span>
                                <div className="S_d1 fl clearfix">
                                    <span>￥</span>{Getgoodlist.price}
                                    <s>￥ {Getgoodlist.market_price}</s>
                                </div>
                                <div className="S_d2 fr clearfix">
                                    <span className="iconfont icon-shoucang"></span>
                                    <span>收藏</span>
                                </div>
                                <p className="S_d3 fl clearfix">{Getgoodlist.goodsname}</p>
                            </div>

                            <NoticeBar content='此商品于2020-11-11,00点结束闪购' color='info' />

                        </div>
                    </div>
                    {/* 身体 （中部分《《《《下》》》》 ）*/}
                    <div className="D_D_C_bottom">
                        <p>分期 <span>可选3/6/12期</span></p>
                    </div>
                </div>
            </div>
            {/* 底部 */}
            <div className="De_footer">
                <div className="D_F_top" >
                    <div className="D_f_T_right">
                        {
                            imgs.map(item => {
                                return (
                                    <img src={item.img} alt="" key={item.id} />
                                )
                            })}
                    </div>
                    <div className="D_f_T_left">

                        <div onClick={() => Cartadd(Getgoodlist.id)}>加入购物车  </div>
                        <div >立即购买  </div>

                    </div>
                </div>
            </div>
        </div >
    )
}
export default Detail